<template>
	<view class="">
		<uni-nav-bar title='首页' statusBar :border='false' color="#000000" fixed backgroundColor='#fff00000'>
		</uni-nav-bar>
		<image class="topImage" src="/static/common/top.png" mode="widthFix" style="width: 100%;"></image>
		<view class="" style="position: relative;margin-top: -260rpx;">
			<view @click="searchClick()" class="searchView flex-row-space-between">
				<view class="flex-row-flex-start">
					<uni-icons type="search" size="20"></uni-icons>
					<view class="searchTitle">
						请输入搜索内容
					</view>
				</view>
				<view class="searchButton flex-column-center">
					搜索
				</view>
			</view>
			<view @click="itemClick()" class="" style="width: 690rpx;height: 330rpx;margin: 0 auto;">
				<swipers :pid="1" height="330rpx" radius="16rpx" padding="0rpx 0"></swipers>
			</view>
			<view class="" style="margin: 30rpx;">
				<image @click="itemClick()" src="https://ylzw.chuanyuguoji.com/images/image1.png" mode="widthFix" style="width: 100%;"></image>
			</view>
			
			<view v-for="(item,index) in zoneList" :key="index">
			<view class="listView">
				<image @click="itemClick()" src="/static/image/image3.png" mode="widthFix" style="width: 100%;"></image>
				<scroll-view class="scroll" scroll-x="true">
					<view class="flex-row-flex-start">
						
						<view @click="itemClick2(index,index1)" class="flex-column-center" style="margin: 20rpx;" v-for="(item1,index1) in item.goodsList" :key="index">
							<image class="goodsImage" :src="item1.image" mode="aspectFit"></image>
							<view class="goodsName ">
									{{item1.name}}
							</view>
							<view class="price" style="margin-top: 0rpx;">
								<text class="price1" style="margin-right: 4rpx;">¥</text>
								<text >{{item1.price}}</text>
								<text class="price1">/天</text>
							</view>
						</view>
					</view>
					
				
				</scroll-view>
			</view>

				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLeaseClassify,
		getLeaseGoodsList,
		getIndexZoneList
	} from '@/api/lease.js';
	import {
		getConfig
	} from '@/api/app'
	import {
		getSearchpage,
		clearSearch
	} from '@/api/store';

	import {
		loadingFun,
		formatPrice
	} from '@/utils/tools';
	import {
		loadingType
	} from '@/utils/type';


	export default {
		data() {
			return {
				weixin: false,
				config: {
					title: "Rain放心购"
				},
				zoneList: [],
				keyword: '', // 搜索内容
				status: loadingType.LOADING, // 加载状态
				page: 1, // 当前数据页面
				goodsType: 'double', // 商品列表样式展示方式
				goodsList: [], // 商品列表数据
				priceSort: '', // 价格排序
				saleSort: '', // 销量排序
				classify_id: '', // 分类ID
				showHistory: false, // 显示搜索历史
				historyList: [], // 搜索历史数据列表
				hotList: [], // 热门搜素数据列表
				leaseClassifyList: [], // 租赁分类列表
			};
		},
		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) this.showHistory = true
			},
			// 是否处于搜索
			showHistory(value) {
				if (value) this.getSearchpageFun();
			}
		},
		computed: {
			comprehensive() {
				const priceSort = this.priceSort;
				const saleSort = this.saleSort;

				return (!priceSort && !saleSort) ? true : false;
			}
		},
		onShow() {

		},
		onLoad(options) {
			if (options) {
				uni.removeStorageSync('shop_id')
				uni.setStorageSync('shop_id', options.shop_id)
			}
			// 获取分类列表数据
			getLeaseClassify().then(res => {
				if (res.code != 1) return;
				this.leaseClassifyList = res.data;
				// this.classify_id = res.data[0].id || '';
				// 商品列表数据请求
				this.getGoodsList();
			});
			this.getIndexZoneList()
			this.getConfigFun()
			// #ifdef H5
			this.isWX()
			//#endif

		},

		// 上拉加载更多数据
		onReachBottom() {
			this.getGoodsList();
		},

		methods: {
			// 格式化价格输出
			formatPrice,
			async getConfigFun() {
				try {
					const {
						code,
						data
					} = await getConfig()
					if (code == 1) {
						uni.setStorageSync('config', data);
						this.config = uni.getStorageSync('config')
					}
				} catch (e) {

				}

			},
			isWX() {
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					this.weixin = true
				} else {
					this.weixin = false
				}
			},
			zoneListClick(item) {
				// #ifdef H5
				uni.switchTab({
					url: 'zoneList?classify_id=' + item.id + '&title=' + item.name
				})
				// window.location.href = `alipays://platformapi/startapp?appId=2021004170623614&page=/pages/lease/lease`;
				//#endif
				//#ifndef  H5
				console.log('非H5端')
				uni.switchTab({
					url: 'zoneList?classify_id=' + item.id + '&title=' + item.name
				})
				//#endif

			},
				itemClick2(index,index1) {
					var id=this.zoneList[index].goodsList[index1].id
					uni.navigateTo({
						url: '/bundle/pages/lease_goods_details/lease_goods_details' +
							'?' + 'id=' + id
					})
				},
			itemClick1(item) {
				console.log(item)
				// #ifdef H5
				uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' +
						'?' + 'id=' + item.id
				})
				// window.location.href = `alipays://platformapi/startapp?appId=2021004170623614&page=/pages/lease/lease`;
				//#endif

				//#ifndef  H5
				console.log('非H5端')
				uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' +
						'?' + 'id=' + item.id
				})
				//#endif

			},
			getIndexZoneList() {
				// 请求
				getIndexZoneList().then(res => {
					console.log(res);
					this.zoneList = res.data
				});
			},
			itemClick() {
				uni.switchTab({
					url: '/pages/lease/classify?classify_id='+this.leaseClassifyList[0].id
				})
			},
			// 更改商品排序样式
			changeType() {
				this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
			},
			searchClick() {
				// #ifdef H5
				// window.location.href = `alipays://platformapi/startapp?appId=2021004170623614&page=/pages/lease/lease`;
				//#endif

				//#ifndef  H5
				console.log('非H5端')
				uni.navigateTo({
					url: '/pages/lease/search'
				})
				//#endif


			},

			// 清空搜索记录
			clearSearchHistory() {
				clearSearch().then(res => {
					if (res.code != 1) return;
					this.getSearchpageFun();
				});
			},

			// 点击取消搜索
			onCancelSearch() {
				this.showHistory = false;
				// this.onRefresh();
			},

			// 点击分类
			onClassify(goods_id) {
				this.classify_id = goods_id;
				this.onRefresh();
			},

			// 点击综合
			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh();
			},

			// 点击价格排序
			onPriceSort() {
				this.saleSort = ''
				this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh();
			},

			// 点击销量排序
			onSaleSort() {
				this.priceSort = ''
				this.saleSort = this.saleSort == 'desc' ? 'asc' : 'desc'
				this.onRefresh();
			},

			// 获取搜索变化
			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code != 1) return;
					const data = res.data;
					this.hotList = data.hot_lists
					this.historyList = data.history_lists
				});
			},

			// 搜索
			onSearch() {
				this.onRefresh();
			},

			// 刷新列表数据
			onRefresh() {
				this.showHistory = false
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => this.getGoodsList());
			},

			// 根据字符串搜索内容
			onChangeKeyword(item) {
				this.keyword = item;
				this.showHistory = false;
				this.onRefresh();
			},

			// 获取商品列表数据
			getGoodsList() {
				if (this.status == loadingType.FINISHED) return;
				// 参数
				const field = {
					category_id: this.classify_id,
					keyword: this.keyword,
					price: this.priceSort,
					sales_sum: this.saleSort,
				}
				// 请求
				loadingFun(
					getLeaseGoodsList,
					this.page,
					this.goodsList,
					this.status,
					field
				).then(res => {
					console.log(res);
					if (!res) return;
					this.page = res.page;
					this.goodsList = res.dataList;
					this.status = res.status;
				});
			},

			// 查看商品详情
			goGoodsDetail(goods_id) {
				uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' +
						'?' + 'id=' + goods_id
				})
			}
		}
	};
</script>

<style >
	page{
		background: #F6F4F7;
	}
	.searchView{
		padding-left:  30rpx;
		margin: 30rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
	}
	.searchTitle{
		margin-left: 16rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #20201D;
	}
	.searchButton{
		margin-right: 8rpx;
		width: 116rpx;
		height: 60rpx;
		
		background: #2C98F9;
		box-shadow: 0rpx 5rpx 7rpx 1rpx rgba(44,152,249,0.33);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.listView{
		margin: 30rpx;
		margin-top: 0;
		background: #FFFFFF;
		border-radius:10rpx;
	}
	.scroll{
		width: 100%;
		height: 332rpx;
	}
	.goodsImage{
		width: 154rpx;
		height: 154rpx;
	}
	.goodsName{
		margin-top: 20rpx;
		height: 70rpx;
		font-weight: normal;
		font-size: 24rpx;
		color: #20201D;
	}
	.price{
		margin:0 20rpx;
		font-weight: normal;
		font-size: 28rpx;
		color: #E80909;
	}
	.price1{
		font-size: 20rpx;
	}
</style>